<template>
  <div class="main-page">
    <PageSearch
      :search-form-config="searchFormConfig"
      :form-data.sync="formData"
      @searchBtnClick="handleSearch"
    />
    <el-row type="flex" justify="end">
      <el-button
        type="primary"
        icon="el-icon-plus"
        size="medium"
        @click="handleCreateGoods"
      >
        新增商品
      </el-button>
    </el-row>
    <PageContent
      ref="pageContent"
      :form-data="formData"
      :content-table-config="contentConfig"
    >
      <template #deviceType="scope">
        {{
          scope.row.deviceType == 1
            ? "TV盒子"
            : scope.row.deviceType == 2
              ? "X86"
              : scope.row.deviceType == 3
                ? "路由器":"未知"
        }}
      </template>
      <template #image="scope">
        <el-image
          v-if="scope.row.picture"
          style="width: 60px; height: 60px"
          :src="getPicUrl(scope.row.picture)"
          :preview-src-list="getPicUrlList(scope.row.picture)"
        >
        </el-image>
        <span v-else>无</span>
      </template>
      <template #operate="{ row }">
        <el-button
          type="text"
          size="small"
          icon="el-icon-edit"
          @click="handleEditGoods(row)"
        >
          编辑
        </el-button>
        <el-button
          type="text"
          size="small"
          icon="el-icon-delete"
          class="delete-btn"
          @click="handleDelete(row)"
        >
          删除
        </el-button>
      </template>
    </PageContent>

    <GoodsInfo
      ref="goodsInfo"
      :init-params="initParams"
      :show.sync="dialogVisible"
      :btn-loading="btnLoading"
    >
    </GoodsInfo>
  </div>
</template>

<script>
import { contentConfig } from "./config/content.config";
import { searchFormConfig } from "./config/search.config";
import { modalFormConfig } from "./config/modal.config";
import GoodsInfo from "./goodsInfo.vue";
import { fetchSaveGoods, fetchDeleteGoods } from "@/api/goods";
export default {
  name: "OrderList",
  components: {
    GoodsInfo,
  },
  data() {
    return {
      contentConfig,
      searchFormConfig,
      modalFormConfig,
      btnLoading: false,
      confirmBtnLoading: false,
      dialogVisible: false,
      formData: {}, // 搜索表单数据
      initParams: {},
    };
  },
  computed: {
    getPicUrl() {
      return (data) => {
        return JSON.parse(data)[0]?.absolutePath;
      };
    },
    getPicUrlList() {
      return (data) => {
        const arr = JSON.parse(data);
        if (Array.isArray(arr)) {
          return arr.map((item) => item.absolutePath);
        }
      };
    },
  },
  watch: {
    dialogVisible(val) {
      if (!val) {
        this.$refs.goodsInfo.fileList = [];
      }
    },
  },
  created() {},
  methods: {
    handleSearch() {
      this.$refs.pageContent.queryTblMain();
    },
    handleCreateGoods(row) {
      this.initParams = {
        title: "新增商品",
        row,
        cb: (params) => {
          this.handleConfirm(params);
        },
      };
      this.dialogVisible = true;
    },
    handleEditGoods(row) {
      row.statusValue = row.statusValue ? +row.statusValue : "";
      this.initParams = {
        title: "编辑商品",
        row,
        cb: (params) => {
          this.handleConfirm(params);
        },
      };
      this.dialogVisible = true;
    },
    handleConfirm(params) {
      this.btnLoading = true;
      fetchSaveGoods(params)
        .then(() => {
          this.dialogVisible = false;
          this.$message.success("操作成功");
          this.$refs.pageContent.queryTblMain();
        })
        .finally(() => {
          this.btnLoading = false;
        });
    },
    handleDelete({ goodsId }) {
      this.$confirm("确认删除该商品吗？", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          fetchDeleteGoods({ id: goodsId }).then(() => {
            this.$message({
              type: "success",
              message: "删除成功!",
            });
            this.$refs.pageContent.queryTblMain();
          });
        })
        .catch(() => {});
    },
  },
};
</script>

<style lang="scss" scoped>

</style>
